<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 解构赋值的用途

        //① 可以实现两值的交换
        let a = 10;
        let b = 20;
        [b, a] = [a, b];
        console.log(a, b);

        //② 处理函数的返回复杂结果
        function fun(){
            //....
            return [10,20,30]; // 在函数内可以通过这种方式返回多个数值
            //return 20;
        }

        //console.log(fun());
        // 可以通过解构赋值的方式，直接获取返回的具体结果信息
        let [x, y, z] = fun();
        console.log(x, y, z);

        // ③ 解构对象的方法（注意此方法没有this的使用）
        let {abs, max} = Math; // 将Math对象中的abs和 max 方法解构出来，可以单独使用
        console.log(abs(-100));
        console.log(max(10,34,78,21,45));

        // ④ 函数参数的定义
        function dd1([x, y, z]){
            //....
        }
        dd1([10,20,30]); // 调用函数并传递参数

        function dd2({x, y, z}){
            //....
        }
        dd2({x:10, y:20, z:30}); // 调用函数并传递参数

        // ⑤ 处理JSON数据（JSON数据是前后端网络通讯时交换数据的格式）
        const data = {
            path:[
                {name:"首页",path:"/"},
                {name:"家用电器",path:"/shop"},
                {name:"电视机",path:"/shop/goods"}
            ],
            picList:[
                {sm:"./p1.png",dm:"/d1.png"},
                {sm:"./p2.png",dm:"/d2.png"},
                {sm:"./p3.png",dm:"/d3.png"},
                {sm:"./p4.png",dm:"/d4.png"},
            ]
        }
        // 通过解构赋值的方式，从data中直接获取piclist数值
        let {picList} = data;
        console.log(picList);


    </script>
</body>
</html>